import Vue from 'vue'
import Component from 'vue-class-component'
import ProductFlowItemClass from '../product/productFlowItem.js'
import {loadImages, uploadImages} from '@/utils/uploadImage/index'
import Platform from '@/supports/platform'

@Component
export default class PhotoDetailClass extends Vue {
  images = []
  products = []
  wrapperHeight = 0
  swImgHeight = 370
  photoId = ''
  cover = ''
  imagesArr = []
  title = ''
  description = ''
  tags = []
  imageUrlsArr = []
  imageUrls = []

  created() {
    this.wrapperHeight = document.documentElement.clientHeight - 108
  }

  mounted () {
  }

  activated () {
    this.photoId = this.$route.params.photoId
    this.refresh(this.photoId)
  }

  refresh (photoId) {
    this.cover = ''
    this.imagesArr = []
    this.images = []
    this.products = []
    this.imageUrlsArr = []
    this.imageUrls = []
    this.getData(photoId)
  }

  updated() {
    this.photoId = this.$route.params.photoId
    this.wrapperHeight = document.documentElement.clientHeight - 108
    // this.swImgHeight = document.getElementById("coverHeight").clientHeight
    // this.getData()
    // alert('123')
  }

  // get coverHeight(){
  //   return 'height' + String(this.swImgHeight) + 'px'
  // }

  flagString(flagsJson) {
    if (!flagsJson || flagsJson.length <= 0) {
      return ''
    }
    let arr = JSON.parse(flagsJson)
    let flagString = arr.join('、')
    return flagString
  }

  async getData(photoId) {
    try {
      const response = await this.$axios.post(('/picture/v1/picture/' + photoId), {})
      if (response.status === 0) {
        this.title = response.data.name
        this.description = response.data.description
        this.tags = response.data.tags
        this.cover = response.data.cover
        this.imageUrlsArr = JSON.parse(response.data.imageUrls)
        for (let swImg of this.imageUrlsArr) {
          this.imageUrls.push(swImg)
        }
        this.imagesArr = response.data.relationPictures.pictures
        this.images = []
        for (let image of this.imagesArr) {
          this.images.push(image.cover)
        }
        this.products = response.data.offProducts.offProducts
      }
    } catch (e) {

    }
  }

  get caculateHeight() {
    return 'height:' + String(this.wrapperHeight) + 'px'
  }

  handlerDeleteImage (index) {
    this.images.splice(index, 1)
  }

  handlerLoadImages () {
    let loadImages = []
    loadImages.push(this.cover)

    for (let img of this.images) {
      loadImages.push(img)
    }

    Platform.saveImages(loadImages)
  }

  handlerShare () {
    let loadImages = []
    loadImages.push(this.cover)

    for (let img of this.images) {
      loadImages.push(img)
    }

    Platform.shareImages(loadImages.slice(0, 9))
  }

  handleFiles(e) {
    this.type = e.target.id
    if (typeof FileReader === 'undefined') {
      // this.setAttribute( 'disabled','disabled' )
    } else {
      this.readFile(e)
    }
  }

  createImageItem () {
    const item = this.images.map((value, index) => {
      return <div class='photoItemClass'>
              {value === '0' ? <div style='padding:4%'>
              <icon name='addImageIcon' scale='6'/>
              <input type="file" class="file-button" id="fileElem" multiple accept="image/gif,image/jpeg,image/jpg,image/png"
                   onChange={this.handleFiles}/>
              </div>
              : <div>
              <img src ={value.cover}/>
              <span onClick={() => this.handlerDeleteImage(index)}><icon name='imageDeleteIcon' scale='2'/></span></div>}
              </div>
    })
    return item
  }

  createdProducts() {
    if (!this.products || this.products.length <= 0) {
      return
    }
    const product = this.products.map(value => {
      return <ProductFlowItemClass product={value}></ProductFlowItemClass>
    })
    return product
  }

  createdImages () {
    const image = this.images.map((value, index) => {
      return <div onClick={() => this.handleClickPhoto(index)} style='-webkit-overflow-scrolling: touch;display:inline-block;height:100%;padding:0 2px'>
              <img style='height:120px' src = {value + '?x-oss-process=image/resize,h_120/quality,q_80'}/>
             </div>
    })
    return image
  }

  swipeImges() {
    const swimgs = this.imageUrls.map((value) => {
      return <mt-swipe-item><img src={value + '?x-oss-process=image/resize,w_750/quality,q_80'} /></mt-swipe-item>
    })
    return swimgs
  }

  handleClickPhoto (index) {
    let image = this.imagesArr[index]

    this.refresh(image.pictureId)
  }

  render () {
    return (
      <div>
        <mt-header class='header' fixed title={this.title}>
          <mt-button onClick={() => { this.$router.go(-1) }} icon="" slot="left"><icon name = 'backIcon' scale='2'/></mt-button>
        </mt-header>
        <div class='photoDetailImgClass' style={this.caculateHeight + '; margin-top:64px'}>
          {/* <img src={this.cover} id="coverHeight"/> */}
          <mt-swipe auto={3000} style={this.caculateHeight}>
            {this.swipeImges()}
          </mt-swipe>
          <div class="photoDec">
            <p v-show={this.description}>{this.description}</p>
            <dd>{this.flagString(this.tags)}</dd>
          </div>

          <div v-show={this.images && this.images.length > 0} style='height:40px;width:100%;background:#f2f2f2;color:gray;padding:10px;text-align:center'>
          相关图片
          </div>
          <div class='linkPhotoClass'>
             <div class = 'linkPhotoSubClass'>
              {this.createdImages()}
             </div>
          </div>

          <div v-show={this.products && this.products.length > 0} style='height:40px;width:100%;background:#f2f2f2;color:gray;padding:10px;text-align:center'>
          相关商品
          </div>
          <div>
             {this.createdProducts()}
          </div>
        </div>
        <dl class = 'photoBottomClass'>
              <dd onClick={this.handlerLoadImages}>下载图片</dd>
              <dd onClick={this.handlerShare}>一键分享</dd>
        </dl>
      </div>
    )
  }
}
